<template>
    <div id="cartcontrol">
        <transition name="decrease">
            <div class="cart-decrease icon-remove_circle_outline" v-show="food.count" @click.stop.prevent="decreaseCart"></div>
        </transition>
        <transition name="count">
            <div class="cart-count" v-show="food.count">{{food.count}}</div>
        </transition>
        <div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>
    </div>
</template>

<script>
    import Vue from 'vue'
    
    export default {
        name: 'Cartconcontrol',
        props: ['food'],
        methods: {
            addCart(event) {
                setTimeout(() => {
                    this.food.count ? this.food.count++ : Vue.set(this.food, 'count', 1);
                    this.$emit('cartAdd', event.target);
                }, 100)
            },
            decreaseCart() {
                setTimeout(() => {
                    if(this.food.count) this.food.count--;
                }, 100)
            }
        }
    }
</script>

<style scoped>
    #cartcontrol {
        font-size: 0;
    }

    #cartcontrol > * {
        display: inline-block;
    }

    .cart-decrease, 
    .cart-add {
        line-height: 24px;
        font-size: 24px;
        color: rgb(0, 160, 220);
    }

    .decrease-enter-active,
    .decrease-leave-active {
        transition: all .3s ease-out;
    }
    
    .decrease-enter,
    .decrease-leave-to {
        opacity: 0;
        transform: translateX(48px) rotate(-900deg);
    }

    .cart-count {
        vertical-align: top;
        width: 12px;
        padding: 0 6px;
        line-height: 24px;
        text-align: center;
        font-size: 10px;
        color: rgb(147, 153, 159);
    }

    .count-enter-active,
    .count-leave-active {
        transition: all .3s ease-out;
    }
    
    .count-enter,
    .count-leave-to {
        opacity: 0;
        transform: translateX(24px) rotate(-900deg);
    }
</style>